<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :inline="true">
					<el-form-item label="代理信息:">
						<el-input v-model="state.tableData.param.search" placeholder="姓名、手机号、昵称搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getTableData()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<el-tabs v-model="state.tableData.param.agentAuditApplyType" @tab-click="handleClick">
					<el-tab-pane label="资料审核" :name=1>
					</el-tab-pane>
					<el-tab-pane label="付款审核" :name=2>
					</el-tab-pane>
					<el-tab-pane label="完成审核" :name=4>
					</el-tab-pane>
					<el-tab-pane label="已拒绝" :name=5>
					</el-tab-pane>
					<el-tab-pane label="申请中" :name=6>
					</el-tab-pane>
				</el-tabs>
				<el-row class="mt10 mb10">
				</el-row>
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" v-loading="state.tableData.loading">
						<el-table-column label="个人信息">
							<template #default="scope">
								<div>
									<div v-for="item in scope.row.agentInfo" :key="item">
										{{ item }}
									</div>
								</div>
							</template>

						</el-table-column>
						<el-table-column label="申请信息" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div v-for="item in scope.row.applyInfo" :key="item">
										{{ item }}
									</div>
								</div>
							</template>


						</el-table-column>
						<el-table-column label="邀请人" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div v-for="item in scope.row.inviterInfo" :key="item">
										{{ item }}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="申请时间" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ formatDate(new Date(scope.row.agentApplyTime), 'YYYY-mm-dd HH:MM:SS')
									}}</span>
							</template>
						</el-table-column>
						<el-table-column label="加入状态" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ scope.row.agentAuditStatusText }}</span>
							</template>
						</el-table-column>
						<el-table-column label="代理时间" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ formatDate(new Date(scope.row.agentCreateTime), 'YYYY-mm-dd HH:MM:SS')
									}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template #default="scope">
								<div v-if="scope.row.agentAuditStatus != 2">
									<el-button text type="primary" @click="onOperation('record', scope.row)">审核记录</el-button>
								</div>
								<div v-else class="flex">
									<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOperation('audit', scope.row)"> 通过 </span>
									<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
									<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOperation('reject', scope.row)"> 驳回 </span>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current"
								background v-model:page-size="state.tableData.param.size"
								layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<joinOperationDialog ref="joinOperationDialogialogRef" @opration="getOpration" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getAgentAuditJoinList, agentAuditJoinAudit } from '/@/api/agent';
import { formatDate } from '/@/utils/formatTime';

// 引入组件
const joinOperationDialog = defineAsyncComponent(() => import('./component/joinOperationDialog.vue'));

// 定义变量内容
const joinOperationDialogialogRef = ref();
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			agentAuditApplyType: 1,
			search: '',
			current: 1,
			size: 10,
		},
	},
});

const handleClick = () => {
	state.tableData.param.current = 1;
	getTableData()
}
// 获取商品列表
const getTableData = async () => {
	state.tableData.loading = true;
	let params = {
		current: state.tableData.param.current,
		size: state.tableData.param.size,
		agentAuditApplyType: state.tableData.param.agentAuditApplyType,
		agentName: state.tableData.search,
	}
	const { results } = await getAgentAuditJoinList(params);
	state.tableData.loading = false;
	state.tableData.data = results.records;
	state.tableData.total = results.total;
}

// 打开新增规格弹窗
const onOperation = (type: string, row?: Object) => {
	joinOperationDialogialogRef.value.openDialog(type, JSON.parse(JSON.stringify(row)));
};
const getOpration = async (data: any) => {
	let params = {

	}
	if (data.type == "audjt") {
		params = {
			agentAuditId: data.agentAuditId,
			type: 1
		}

	} else if (data.type == "reject") {
		params = {
			agentAuditId: data.agentAuditId,
			type: 0
		}
	}
	const { results } = await agentAuditJoinAudit(params);
	ElMessage.success("操作成功")

}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.size = val;
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.current = val;
	getTableData();
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	padding-top: 10px;

	.el-tabs {
		.el-tabs__header {
			margin-bottom: 0;
		}
	}

	.el-table {
		flex: 1;

		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
